<template>
<div class="app-container">

    <div align="center">
      <p1>位置</p1>
        <el-select v-model="devPosition.choose" @change="changePosition()" @clear="getDevicePosition()" clearable placeholder="请选择" style="width : 15%">
          <el-option
            v-for="item in devPosition.list"
            :key="item.devPosition"
            :label="item.devPosition"
            :value="item.devPosition">
          </el-option>
        </el-select>
      <p1 style="margin-left:10px;">设备</p1>
        <el-select v-model="devName.choose" @change="changeName()"  clearable placeholder="请选择" style="width : 15%">
          <el-option
            v-for="item in devName.list"
            :key="item.devName"
            :label="item.devName"
            :value="item.devName">
          </el-option>
        </el-select>
       <p1 style="margin-left:10px;">ID</p1>
        <el-select v-model="devId.choose" @change="getDeviceDetail()"  clearable placeholder="请选择" style="width : 15%">
          <el-option
            v-for="item in devId.list"
            :key="item.devId"
            :label="item.devId"
            :value="item.devId">
          </el-option>
        </el-select>
        <el-checkbox v-model="checked" style="margin-left:10px;">加急</el-checkbox>
      </div>

  <el-tabs v-model="active">
    <el-tab-pane label="时间段选择" name="times"></el-tab-pane>
    <el-tab-pane label="时间选择" name="time"></el-tab-pane>
  </el-tabs>

    <div class="flex" v-if="active=='times'">
        <div>
            <calendar :events="calendar2.events" 
            :range="calendar2.range" :begin="calendar2.begin"  
            :value="calendar2.value"  
            @select="getChoose"
            v-if="hackReset"></calendar>
        </div>
    </div>
    

    <div v-else >

        
  <el-row :gutter="20" type="flex">

    <el-col :span="6" >
      
      <el-card>
          <el-row>
              <el-col :span="4">
                    <el-button  icon="el-icon-arrow-left" @click="dayBefore"></el-button>
              </el-col>
              <el-col :span="15">
                    <el-date-picker
                    v-model="day"
                    type="date"
                    placeholder="选择日期"
                    format="yyyy 年 MM 月 dd 日"
                    @change="">
                    </el-date-picker>

              </el-col >
              <el-col  :span="4">
                    <el-button  icon="el-icon-arrow-right" @click="dayAfter"></el-button>
              </el-col>

          </el-row>
        
    </el-card>
    </el-col>

 </el-row>

 <el-row style=" padding-top:20px;"    :gutter="20"  v-for="i in 3">

     <el-col :span="6" v-for="j in 4"  >
     
    <el-card style="height:150px;" >
        <div slot="header" class="clearfix" style="height:25px;">
            <div>
              <el-col :span="13" class="myPadding">
                <span style="font-weight:bold;font-size:18px;">{{mat[i-1][j-1][0]}}</span>
              </el-col>
              <el-col :span="3" :offset="6">
                <el-button  
                v-if="mat[i-1][j-1][1]&&mat[i-1][j-1][1]!='old'"

                icon="el-icon-check" 
                circle style="float:right;"
                v-bind:class="{'el-button el-button--success is-circle':mat[i-1][j-1][3] }"
                @click="Click(i-1,j-1)">
                </el-button>
              </el-col>
            </div>
        </div>
        <div align="center" style="font-size:16px;" >
            <i 
            v-bind:class="[mat[i-1][j-1][1]&&mat[i-1][j-1][1]!='old' ? 'el-icon-check' : 'el-icon-close']">
            </i>
            <el-tooltip class="item"  effect="dark"  placement="top-start">
                <div slot="content">{{mat[i-1][j-1][2]}}</div>
            <span v-if="mat[i-1][j-1][1]&&mat[i-1][j-1][1]!='old'">可预约</span>
            <span v-else>不可预约</span>
            </el-tooltip>
        </div>
    </el-card>
    </el-col>

    
 </el-row>
























      

    </div>

    <el-row :gutter="20" style="padding-top:10px;">
        <el-col  :span="12">
            <p1>使用项目</p1>
            <el-select v-model="devFunction.choose"  clearable placeholder="请选择" style="width : 15%">
                <el-option
                    v-for="item in devFunction.list"
                    :key="item.function"
                    :label="item.function"
                    :value="item.function">
                </el-option>
            </el-select>
        </el-col>
        <el-col  :span="12">
            <div align="right">
                <el-button type = "success" @click="showDialog()" align="center" >
                    立即预约
                </el-button> 
            </div>
        </el-col>
    </el-row>


    <el-dialog title="预约详情" :visible.sync="dialogFormVisible">
      <el-form class="small-space"  label-position="left" label-width="100px"
               style='width: 600px; margin-left:50px;' > 
        <el-form-item label="用户名称" >
          {{dialogData.username}}
        </el-form-item>
        <el-form-item label="设备位置" >
          {{dialogData.devPosition}}
        </el-form-item >
        <el-form-item label="设备名称" >
          {{dialogData.devName}}
        </el-form-item >
        <el-form-item label="设备ID" >
          {{dialogData.devId}}
        </el-form-item >
        <el-form-item label="使用项目" >
          {{dialogData.devFunction}}
        </el-form-item >
        <el-form-item label="预约开始时间"  v-if="active=='times'">
          {{dialogData.start}}
        </el-form-item >
        <el-form-item label="预约结束时间" v-if="active=='times'" >
          {{dialogData.end}}
        </el-form-item >

        <el-form-item label="日期" v-if="active=='time'">
          {{day.toLocaleDateString()}}
        </el-form-item >

        <el-form-item label="时间" v-if="active=='time'">
          <span v-for="item in dialogData.time">
            {{item}}
          </span>
        </el-form-item >

        <el-form-item label="是否加急" >
          {{dialogData.isAnxious}}
        </el-form-item >
        
      </el-form>
      <div slot="footer" >
        <el-button type = "success" @click="updateDialog()" >
          确定
        </el-button>
      </div>

    </el-dialog>

    


</div>
</template>

<script>
 
import calendar from './calendar.vue'
import global from '../../Global'

export default {
    name: 'app',
    components: {
        calendar
    },
    data(){
        return {
            day:new Date(),
            mat:'',
            dialogFormVisible :false,

            dialogData:{
                username:global.obj.nickName,
                user_id:global.obj.userId,
                start:'',
                end:'',
                time:[],
                devId:'',
                devPosition:'',
                devName:'',
                devFunction:'',
                isAnxious:'',
            },

            checked:false,
            hackReset:true,
            devPosition:{
                choose:'',
                list:[]
            },
            devName:{
                choose:'',
                list:[]
            },
            devId:{
                choose:'',
                list:[]
            },
            devFunction:{
                choose:'',
                list:[]
            },
            timebegin:'',
            timeend:'',
            active:'times',
            calendar2:{
                range:true,
                value:[(new Date()).toLocaleDateString().split('/'),(new Date()).toLocaleDateString().split('/')], //默认日期
                lunar:false, //显示农历
                begin:(new Date()).toLocaleDateString().split('/'), //可选开始日期
                //end:[2019,5,1],   //可选结束日期
                
                events:{
                },
                select(begin,end){
                    // console.log(begin.toString(),end.toString());
                }
            }
        }
    },
    methods:{
         init2(){
            this.api({
                url: "/devices/getDeviceDetail",
                method: "post",
                data:{
                    devId:1
                }
            }).then(data => {
                console.log(data);
                var arr = new Array(3);
                for(let i = 0;i<3;i++){
                    arr[i] = new Array(4);
                    for(let j = 0;j<4;j++){
                        arr[i][j] = new Array(4);
                        arr[i][j][3] = false;
                    }
                    
                }
                this.mat = arr;
                this.mat[0][0][0] = "07:00-07:59";
                this.mat[0][1][0] = "08:00-08:59";
                this.mat[0][2][0] = "09:00-09:59";
                this.mat[0][3][0] = "10:00-10:59";
                this.mat[1][0][0] = "11:00-11:59";
                this.mat[1][1][0] = "12:00-12:59";
                this.mat[1][2][0] = "13:00-13:59";
                this.mat[1][3][0] = "14:00-14:59";
                this.mat[2][0][0] = "15:00-15:59";
                this.mat[2][1][0] = "16:00-16:59";
                this.mat[2][2][0] = "17:00-17:59";
                this.mat[2][3][0] = "18:00-18:59";
                for(let i = 0;i < data.list.length;i++){
                    for(let j = 0;j<3;j++){
                        for(let z = 0;z<4;z++ ){
                            this.mat[j][z][1] = this.judgeTime(this.mat[j][z][0],
                            data.list[i].stime,data.list[i].etime);
                            if(this.mat[j][z][1] === "old"){
                                this.mat[j][z][2] = "此时间已过";
                            }else if(this.mat[j][z][1]){
                                this.mat[j][z][2] = "此时间段无人使用";
                            }else{
                                this.mat[j][z][2] = "申请人： "+ data.list[i].username +" 使用项目： "+ data.list[i].function;
                            }
                        }
                    }

                }
                this.$forceUpdate();

            })

        },
        judge(beginTime,endTime,nowTime){
            if(nowTime.getTime()+1<(new Date()).getTime())
                return "old";
            //console.log(nowTime);
            if(nowTime.getTime() - beginTime.getTime() > 0 && nowTime.getTime() - endTime.getTime() < 0){
                return true;
            }else{
                return false;
            }

        },
        judgeTime(str,beginTime,endTime){
            let strb = str.split('-');
            let stime = strb[0].split(':');
            let etime = strb[1].split(':');
            let begin = new Date(beginTime);
            let end = new Date(endTime);
            let tempTime = new Date(this.day);
            tempTime.setHours(stime[0]);
            tempTime.setMinutes(stime[1]);
            //console.log(tempTime);
            let a = this.judge(begin,end,tempTime);
            tempTime.setHours(etime[0]);
            tempTime.setMinutes(etime[1]);
            let b = this.judge(begin,end,tempTime);
            if(a === "old")
                return "old";
            if(b === "old")
                return "old";
            if(a||b){
                return false;
            }else{
                return true;
            }
        },
        dayBefore(){
            var value = this.day.getTime();
            value -= (24 * 3600 * 1000);
            this.day = new Date(value);
            this.init2();

        },
        dayAfter(){
            var value = this.day.getTime();
            value += (24 * 3600 * 1000);
            this.day = new Date(value);
            this.init2();

        },
        Click(i,j){
           this.mat[i][j][3] = !this.mat[i][j][3];
           this.$forceUpdate();
        },
        getChoose(begin,end){
            if(this.devId.choose ==''){
                this.$message({
                    message: '请先选择设备',
                    type: 'warning'
                });
                return ;
            }
            this.timebegin = begin.toString().split(',')[0]+'/'
            +(parseInt(begin.toString().split(',')[1])+1)+'/'
            +begin.toString().split(',')[2];
            this.timeend = end.toString().split(',')[0]+'/'
            +(parseInt(end.toString().split(',')[1])+1)+'/'
            +end.toString().split(',')[2];
        },
        getDeviceFunction(){
            this.api({
            url: "/devices/getDeviceFunction",
            method: "post",
            data:{
                devId:this.devId.choose
            }
            }).then(data => {
                this.devFunction.list = data.list;
            })

        },
        getDeviceDetail(){
            this.calendar2.events = {};
            this.dialogData.devId = this.devId.choose;
            this.dialogData.devPosition = this.devPosition.choose;
            this.dialogData.devName = this.devName.choose;
            this.getDeviceFunction();

            
            this.api({
                url: "/devices/getDeviceDetail",
                method: "post",
                data:{
                    devId:this.devId.choose
                }
            }).then(data => {
                for(var i = 0; i <data.list.length; i++){
                    let s = new Date(data.list[i].stime);
                    let e = new Date(data.list[i].etime);
                    let tDate = s;
                    while(tDate.getDate()<=e.getDate()){
                        let t = tDate.toLocaleDateString().split('/');
                        t = t[0]+'-'+t[1]+'-'+t[2];
                        this.calendar2.events[t] ="申请人："+data.list[i].username + "  使用项目：" +data.list[i].function;
                        tDate = new Date(tDate.getTime() +　24*3600*1000);
                    }
                }
                this.hackReset = false;
                this.$nextTick(() => {
                    this.hackReset = true
                })
            })

        },
        init(){
            if(!(global.obj.devId === '')){
                this.devPosition.choose = global.obj.devPosition;
                this.devName.choose = global.obj.devName;
                this.devId.choose = global.obj.devId;
                this.getDeviceDetail();
                this.getDeviceFunction();
            }else{
                this.getDevicePosition();
            }

        },
        getDevicePosition(){
            this.devName.choose = '';
            this.devId.choose = '',
            this.api({
            url: "/devices/getDevicePosition",
            method: "get",
            }).then(data => {
            this.devPosition.list = data.list;
            })

            },

        changePosition(){
            this.api({
                url: "/devices/getDeviceName",
                method: "post",
                data:{
                    devPosition:this.devPosition.choose
                }
            }).then(data => {
                console.log(data);
                this.devName.list = data.list;
            })

        },
        changeName(){
            this.api({
                url: "/devices/getDeviceId",
                method: "post",
                data:{
                    devPosition:this.devPosition.choose,
                    devName:this.devName.choose
                }
            }).then(data => {
                console.log(data);
                this.devId.list = data.list;
            })           
        },
        formatDate(d){
            var yy = d.getFullYear(); // 年
            var mm = d.getMonth() + 1; // 月。
            var dd = d.getDate(); // 日
            var hh = d.getHours(); // 小时
            var min = d.getMinutes(); // 分钟
            var ss = d.getSeconds(); // 秒
            var qq = Math.floor((d.getMonth() + 3) / 3); // 季度
            var sss = d.getMilliseconds(); // 毫秒
            return (yy + "-" + mm + "-" +  dd + " " + hh + ":" + min + ":" + ss); 
        },
        updateDialog(){
            if(this.dialogData.time.length!=0){
                for(let i = 0;i<this.dialogData.time.length;i++){
                    let strb = this.dialogData.time[i].split('-');
                    let stime = strb[0].split(':');
                    let etime = strb[1].split(':');
                    let tempsTime = new Date(this.day);
                    tempsTime.setHours(stime[0]);
                    tempsTime.setMinutes(stime[1]);
                    let tempeTime = new Date(this.day);
                    tempeTime.setHours(etime[0]);
                    tempeTime.setMinutes(etime[1]);
                    this.dialogData.start = this.formatDate(tempsTime);
                    this.dialogData.end = this.formatDate(tempeTime);
                    this.api({
                        url: "/devices/applyDevices",
                        method: "post",
                        data:this.dialogData
                    }).then(data => {
                        this.dialogFormVisible = false;
                        this.$message({
                            message: '申请成功',
                            type: 'success'
                        });
                        
                    }) 
                }
                

            }else{
                this.api({
                    url: "/devices/applyDevices",
                    method: "post",
                    data:this.dialogData
                }).then(data => {
                    this.dialogFormVisible = false;
                    this.$message({
                        message: '申请成功',
                        type: 'success'
                    });
                    
                }) 
            }
            
        },
        showDialog(){

            for(let i = 0;i<3;i++){
                for(let j = 0;j<4;j++){
                    if(this.mat[i][j][3])
                        this.dialogData.time.push(this.mat[i][j][0]);
                }
                
            }

            if(this.timebegin == ''&&this.dialogData.time.length==0){
                this.$message({
                    message: '请先选择时间',
                    type: 'warning'
                });
                return ;
            }
            if(this.devFunction.choose == ''){
                this.$message({
                    message: '请先选择项目',
                    type: 'warning'
                });
                return ;
            }
            if(this.checked){
                this.dialogData.isAnxious = '是';
            }else{
                this.dialogData.isAnxious = '否';
            }
            this.dialogData.start = this.timebegin;
            this.dialogData.end = this.timeend;
            this.dialogData.devFunction = this.devFunction.choose;
            this.dialogFormVisible = true;
        }
    },
    created(){

        this.init();
        this.init2();

    }

}
</script>

<style>
/*demo*/
.flex{
    box-sizing: border-box;

    display: -webkit-box;
    -webkit-box-pack: start;
    -webkit-box-align: start;

    display: -webkit-flex;
    -webkit-justify-content: space-between;
    -webkit-align-items: top;

    display: flex;
    justify-content: space-between;
    align-items: top;
    flex-flow:row wrap
}
.flex>div{
    margin:10px;
    padding:20px;
    width:100%;
    min-width:300px;
    border: 1px solid #eee;
    border-radius: 2px;
    position: relative;
}
.flex>div>span{
    position: absolute;
    left:0px;
    top:0px;
    padding:2px 10px;
    font-size:10px;
    border-radius:0 0 2px 0;
    background:#ea6151;
    color:#fff;
}
.flex>div>input{
    box-sizing: border-box;
    width:100%;
    margin-top:20px;
    border-radius: 2px;
    border:1px solid #dedede;
    padding:10px;
    font-size: 16px;
    background:url() no-repeat 8px 10px;
        padding-left: 36px;
        color:#666;
}

/*transition*/
.fade-enter-active,
.fade-leave-active {
    transition: all .5s ease-in-out;
}
.fade-enter,.fade-leave-active{
    opacity: 0;
    transform: translateY(-10px);

}

/*下拉框*/
.calendar-dropdown{
    background: #fff;
    position: absolute;
    left:0;
    top:0;
    padding:20px;
    border: 1px solid #eee;
    border-radius: 2px;
}
.calendar-dropdown:before {
    position: absolute;
    left:30px;
    top: -10px;
    content: "";
    border:5px solid rgba(0, 0, 0, 0);
    border-bottom-color: #DEDEDE;
}
.calendar-dropdown:after {
    position: absolute;
    left:30px;
    top: -9px;
    content: "";
    border:5px solid rgba(0, 0, 0, 0);
    border-bottom-color: #fff;
}

/*弹出框*/
.calendar-dialog{
    position: absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
}

.calendar-dialog-mask{
    background:rgba(255,255,255,.5);
    width:100%;
    height:100%;
}

.calendar-dialog-body{
    background: #fff;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    padding:20px;
    border: 1px solid #eee;
    border-radius: 2px;
}
</style>